<template>
  <div>
    <div id="pagelist">
      <div class="pagetabs">
        <ul>
          <li :class="{'active':nav_top_btn == 0}" @click="checkNva(0)">页面</li>
          <!--<li :class="{'active':nav_top_btn == 1}" @click="checkNva(1)" v-if="false">图层</li>-->
        </ul>
      </div>
      <div class="leftbar" v-show="nav_top_btn == 0">
        <ul class="thumbwrap" id="pagelistID">
          <draggable v-model="pagesData" :options="{group:'people'}" @start="drag=true" @end="drag=false">
            <li v-for="(page,index) in pagesData" :class="{'active':currentPage == index+1}" class="thumb">
              <div style="position:absolute;top:0;left:0;width:190px;height:280px;z-index:99;"
                   @click="SelectPage(index+1)">
                &nbsp;
              </div>
              <p>页面{{ index + 1 }}</p>
              <div class="wrap pr">
                <!--<div :class="{'grid_bg': bgGridStatus}">-->
                <ul style="transform-origin:0 0;transform:scale(0.22);">
                  <div :style="setBgStyle(page.pagebg)" style="width:640px;height:1008px;"></div>
                  <li v-for="(item,index1) in page.elements" :style="setOutStyle(item.out.css,item.type)"
                      :class="['item_wrapper', item.class]" :type="item.type" :index="index1"
                      style="position: absolute;">

                    <!-- <img v-if="item.type==4" :src="item.src" :style="setOutStyle(item.in.css,item.type)"/> -->
                    <!-- 图片 -->
                    <img v-if="item.type==4" :src="item.src" :style="setOutStyle1(item.in.css,item.type)"/>

                    <!-- 文字  -->
                    <div v-if="item.type==2 || item.type==5 "
                         v-html="getContent(item.content)"
                         style="background: none;overflow-y:hidden;overflow-x:hidden;" readonly="readonly"
                         :style="setOutStyle(item.in.css,item.type)" ref="text"></div>

                    <!-- svg  -->
                    <div :class="'svg1_'+index1 + '_' + (index + 1)" data-flag="0" class="svg" v-if="item.type=='h'"
                         v-html="loadSvg(item,index1 + '_' + (index + 1))"
                         style="width: 100%; height: 100%; position: relative;"></div>

                    <!-- 电话  -->
                    <a v-if="item.type=='phoneCallButton'" class="fa fa-phone"
                       :style="setOutStyle(item.in.css,item.type)">&nbsp;&nbsp;{{item.content}}</a>

                    <!-- 网址  -->
                    <a v-if="item.type=='linkButton'" :style="setOutStyle(item.in.css,item.type)" class="fa fa-link">&nbsp;&nbsp;{{item.content}}</a>

                    <!-- 点赞  -->
                    <a v-if="item.type=='interActionButton'"
                       :style="setOutStyle(item.in.css,item.type)" style="text-align: center" class="fa fa-thumbs-up">&nbsp;&nbsp;{{item.content}}</a>
                    <!-- 地图  -->
                    <img v-if="item.type==='m'"
                         :src="'http://api.map.baidu.com/staticimage/v2?ak=WtfAdHwd1tMOCf2dzdRIhNZkSq8V7o5W&width=600&height=300&dpiType=ph&markers='+item.in.properties.address+'|'+item.in.properties.lng+','+item.in.properties.lat+'&markerStyles=l,,0xff0000&center='+item.in.properties.address+'&labels='+item.in.properties.address+'|'+item.in.properties.lng+','+item.in.properties.lat+'&zoom=17&labelStyles=我在这,1,28,0xffffff,0x1abd9b,1'"/>

                    <!--<div :id="'maps'+page.id+'k'" v-if="item.type==='m'" style="width:100%;height:100%" data-flag="0"-->
                    <!--:style="loadBaiDuMap(item.in.properties,'maps'+page.id+'k')"></div>-->

                    <!-- 倒计时  -->
                    <count-down v-if="item.type=='countDown'" v-on:start_callback="countDownS_cb(1)"
                                v-on:end_callback="countDownE_cb(1)" :startTime="new Date().getTime()"
                                :endText="item.in.properties.endtip"
                                :endTime="parseInt(item.in.properties.deadlineTime)"
                                :item="item"></count-down>
                    <!-- input框  -->
                    <div v-if="item.type=='i'" style="position:relative">

                      <input :style="setOutStyle(item.in.css,item.type)"
                             style="position:absolute">
                      <!-- <span style="position:absolute;top:5px;right:5px;font-size:40px;color:red;"> * </span> -->
                      <span :style="setSpanStyle(item.in.css)"
                            style="position: relative;pointer-events: none; opacity: 0.7;padding-left:20px;">{{ item.in.properties.placeholder
                        }}</span>
                      <span :style="setSpanStyle(item.in.css)" v-show=" item.in.properties.require==true "
                            style="position: relative;pointer-events: none; color:red;">*</span>
                    </div>

                    <!-- submit按钮  -->
                    <div v-if="item.type=='s'" :style="setOutStyle(item.in.css,item.type)">
                      {{item.in.properties.str}}
                    </div>

                  </li>
                </ul>
                <!--</div>-->
                <div class="oprate clearfix">
                  <a href="javascript:;" class="copy" @click.self="CopyPage(index)"></a>
                  <a href="javascript:;" class="delete" v-if="currentPage == index+1" @click.self="DelMessage(index)"></a>
                </div>
              </div>
            </li>
          </draggable>
        </ul>

      </div>
      <div class="layer" v-show="nav_top_btn == 1" v-if="false">
        <ul>
          <li v-for="(item,index) in currentPageData" :class="{'active' :index==checkedItems[0]}">
            <div v-if="item.type=='4'" @click="checkItem(4,index)">Image</div>
            <div v-if="item.type==2 || item.type==5" v-text="getContent(item.content)" @click="checkItem(25,index)" ref="text"></div>
            <div v-if="item.type=='h'" @click="checkItem('h',index)">SVG</div>
            <div v-if="item.type=='phoneCallButton'" @click="checkItem('phoneCallButton',index)">电话</div>
            <div v-if="item.type=='linkButton'" @click="checkItem('linkButton',index)">网址</div>
            <div v-if="item.type=='interActionButton'" @click="checkItem('interActionButton',index)">点赞</div>
            <div v-if="item.type=='m'" @click="checkItem('countDown',index)">地图</div>
            <div v-if="item.type=='countDown'" @click="checkItem('countDown',index)">倒计时</div>
            <div v-if="item.type=='i'" @click="checkItem('i',index)">文本框</div>
            <div v-if="item.type=='s'" @click="checkItem('s',index)">按钮</div>
          </li>
          <!--<li>文字</li>-->
          <!--<li>文字</li>-->
          <!--<li>文字</li>-->
          <!--<li>文字</li>-->
          <!--<li>文字</li>-->
          <!--<li>文字</li>-->
        </ul>
      </div>
      <!--<div class="oprate clearfix">-->
      <!--<a href="#" class="copy" @click.self="CopyPage(index)"></a>-->
      <!--<a href="#" class="delete" v-if="currentPage == index+1" @click.self="DelMessage(index)"></a>-->
      <!--</div>-->
      <!--</div>-->
      <!--</li>-->
      <!--<div class="addbtn"><a @click.self="AddPage"></a></div>-->
    </div>

    <Modal
      v-model="showModal"
      title="提示"
      @on-ok="DelPage"
      width="300">
      <p>删除后不可恢复 是否确定删除?</p>
    </Modal>
  </div>
</template>

<script type="text/javascript">
 var checkIndex;
  import {mapActions, mapGetters} from 'vuex'
  import Util from '../Util/index.js'
  import CountDown from '@/components/common/vue2-countdown'
  import api from '../api/index.js'
  import draggable from 'vuedraggable'//拖拽控件
  export default {
    name: "pagelist",
    props: ["bgGridStatus"],
    watch:{
    },
    computed: {
      ...mapGetters([
        "pagesData",
        "currentPageBg",
        "currentPage",
        "currentPageData",
        "currentPageMain",
        "checkedItems"
      ]),
      pagesData: {
        get() {
          return this.$store.state.workData.pages
        },
        set(value) {
          this.$store.dispatch('dragPage', value)
        }
      }
    },
    components: {
      CountDown,
      draggable
    },
    mounted: function () {

    },
    data() {
      return {
        nav_top_btn: 0,
        baseUrl: "http://res.yaoyue365.com/",
        showModal: false,
        index: 0,
        checkitem:0,
        shows: true
      }
    },
    watch: {

      pagesData(){
        this.$nextTick(() => {
          var container = this.$el.querySelector("#pagelistID");
//          console.log(container.scrollHeight);
          container.scrollTop = container.scrollHeight;
          // $("#pagelistID").scrollTop($("#pagelistID")[0].scrollHeight);
        })
      },
    },
    methods: {
      checkNva(index) {
        switch (index) {
          case 0:
            this.nav_top_btn = 0
            break;
          case 1:
            this.nav_top_btn = 1
            break;
        }
      },
      ...mapActions({}),
      countDownS_cb(){
        // console.log("countDownS_cb")
      },
      countDownE_cb(){
        // console.log("countDownE_cb")
      },
      SelectPage(index){
        if (this.currentPage != index) {


          this.$store.dispatch('selectPage', index);
          $('.svg2').attr('data-flag', 0);
        }


      },
      DelMessage(index){
        if (this.$store.state.workData.pages.length === 1) {
          this.$Message.error("至少保留一页");
          return;
        }
        this.showModal = true;
        this.index = index;
      },
      DelPage(){
        // this.showTip("删除中...")
        var param = {};
        param.index = this.index;
        this.$store.dispatch('pushHistory', param);

        var tip = this.$Message.loading({
          content: '删除中...',
          duration: 0
        });
        this.$http.get(api.delPage(this.$store.state.workData.pages[this.$store.state.currentPage - 1].sceneid, this.$store.state.workData.pages[this.$store.state.currentPage - 1].id)).then(res => {
          if (res.data.code == 200) {
            setTimeout(tip, 1);
            if (res.data.status) {
              this.$store.dispatch('delPage', this.index)
            } else {
              this.$Message.error(res.data.msg);
            }
          } else {
            setTimeout(tip, 1);
            // window.alert('删除一页出错!')
            this.$Message.error('网络开小差啦~');
          }
        }).catch((error) => {     // 错误处理
          console.log(error)
          // window.alert('删除一页出错!')
          setTimeout(tip, 1);
          this.$Message.error('网络开小差啦~');
        })
      },
      AddPage(){

        var tip = this.$Message.loading({
          content: '添加中...',
          duration: 0
        });

        this.$http.get(api.addNewPage(this.$store.state.workData.pages[this.$store.state.currentPage - 1].sceneid, this.pagesData.length + 1)).then(res => {
          // debugger

          // console.log(res.data.lists)
          if (res.data.code == 200) {

            setTimeout(tip, 1);
            if (res.data.status) {

              var params = {};
              params.page = res.data.pagedata;
              this.$store.dispatch('addPage', params)

            } else {
              setTimeout(tip, 1);
              this.$Message.error(res.data.msg);

            }

          } else {

            this.$Message.error('网络开小差啦~');

          }

        }).catch((error) => {     // 错误处理
          console.log(error)
          setTimeout(tip, 1);
          this.$Message.error('网络开小差啦~');
        })

      },
      setBgStyle(PageBg){

        if (typeof(PageBg) == "undefined") {

          return
        }

        if (typeof(PageBg.backgroundImage) == "undefined") {

          return
        }

        if (PageBg.backgroundImage.length) {

          // var style = {};
          // style.background = "url(" + this.baseUrl + PageBg.backgroundImage + ");";
          // style.backgroundSize="cover";
          //width:80px;height:80px
          var style = "background: url(" + PageBg.backgroundImage + ") no-repeat top left / cover;z-index:-888;";
          // var style1 = "background-size:cover;";

          // var s = style + style1;
          // debugger
          return style
        } else {

          return "background: " + PageBg.backgroundColor;
        }


      },
      getContent(data){
        if (data != undefined) {
          var reTag = /<(?:.|\s)*?>/g;
          var data2 = this.html_decode(data);
//          data2 = data2.replace(/(?!<div.+?>)(?!<br.+?>)<[^>]+>/g, "");//去掉不是div的所有的html标记
//          var str1 = data2.replace(/\<div>/g, '</br>');
//          var str2 = str1.replace(/\<\/div>/g, '');
//          return str2.replace(reTag,"");
          return data2;
        }
      },
      CopyPage(index){

        var tip = this.$Message.loading({
          content: '复制中...',
          duration: 0
        });
        this.$http.get(api.copyPage(this.$store.state.workData.pages[this.$store.state.currentPage - 1].sceneid, this.$store.state.workData.pages[this.$store.state.currentPage - 1].id)).then(res => {
          // debugger
          if (res.data.code == 200) {

            if (res.data.status) {
              setTimeout(tip, 1);
              var params = {};
              params.page = res.data.pagedata;
              params.index = index;
              this.$store.dispatch('copyPage', params);


            } else {
              setTimeout(tip, 1);
              this.$Message.error(res.data.msg);

            }
          } else {

            setTimeout(tip, 1);
            this.$Message.error('网络开小差啦~');
          }


        }).catch((error) => {     // 错误处理
          // console.log(error)
          setTimeout(tip, 1);
          this.$Message.error('网络开小差啦~');
        })

      },
      setNewAni(anim){


        if (anim.length == 0) {
          // debugger
          return;
        }
        // debugger
        var a = this.animationUtil(anim);

        // console.log('ani' + a);
        return a;
      },
      setSpanStyle(inCssObj){

        var styles = "";

        for (var item in inCssObj) {

          var value = inCssObj[item];
          if (item === "height") {
            styles += item + ":" + value + "px" + ";";
          } else if (item === "lineHeight" || item === "fontSize" || item === "color") {
            styles += item + ":" + value + ";";
          }
        }

        // console.log(styles+"ss")
        return styles;

      },
      setOutStyle(OutCss, itemType){

        if (itemType == 3) {

          return
        }

        // debugger


        var styles = "";


        for (var item in OutCss) {

          var value = OutCss[item];

          if (item === "width") {


            // console.log(typeOf(value)+ "asdasdas")
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";

              styles += item + ":" + value + "px;";
              continue
            }

            styles += item + ":" + value + ";";
          }
          if (item === "height") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "top") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "left") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            } else if (value.indexOf("px") == -1) {
              // debugger
              // OutCss[item] = value +"px";
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "color" && itemType === "interActionButton") {
            styles += item + ":#ffffff;";
            continue
          }

          styles += item + ":" + value + ";";
          // styles += "transform-origin:0 0;transform:scale(0.4);"
        }
        // console.log(styles)
        return styles;

      },
      //子元素宽高100%
      setOutStyle1(OutCss, itemType){
        if (itemType == 3) {
          return
        }
        var styles = "";
        for (var item in OutCss) {
          var value = OutCss[item];
          if (item === "width") {
            styles += item + ":100%;";
            continue;
          }
          if (item === "height") {
            styles += item + ":100%;";
            continue;
          }
          if (item === "top") {
            if (isNaN(value) == false) {
              styles += item + ":" + value + "px;";
              continue
            }
            styles += item + ":" + value + ";";
          }
          if (item === "left") {
            if (isNaN(value) == false) {

              styles += item + ":" + value + "px;";
              continue

            }
            styles += item + ":" + value + ";";
          }
          styles += item + ":" + value + ";";
        }
        return styles;
      },
      setBothStyle(datas, data) {
        var a = this.setStyle2(datas);
        var b = this.animationUtil(data);
        return a + b;

      },
      tml_decodes(str){
        var tt;
        for (var i = 0; i < str.length; i++) {
          tt = str.replace(/&nbsp;/g, " ");
          tt = tt.replace(/<\/br>/g, "");
        }
        return tt;
      },
      html_decode(str) {

        return Util.htmlDecode(str);

      },
      animationUtil(data) {
        var str = "";
        var anim = data;
        if (anim) {

          for (var i = 0; i < anim.length; i++) {
            // var animationType = Util.getAnimationType(anim[i].type, anim[i].direction);
            var animationType = anim[i].type;
            var animationDuration = anim[i].duration;
            var animationDelay = anim[i].delay;
            var animationCount = anim[i].count == -1 ? "infinite" : anim[i].count;
            var animationDirection = i == 0 ? "both running" : "normal";
            var dot1 = i == 0 ? "animation:" : ",";
            //						str += dot1 + animationType + " " + animationDuration + "s " + anim[i].linear + animationDelay + "s " + animationCount + " " + animationDirection;
            str += dot1 + animationType + " " + animationDuration + "s " + animationDelay + "s " + animationCount + " " + animationDirection;
          }
        }
        // console.log()
        return str;

      },
      setStyle2(data) {
        // debugger
        var styles = "";
        //				if(!isNaN(data.width)) {
        for (var item in data) {
          if (item === "width") {
            styles += "width:100%;";
            continue;
          }
          if (item === "height") {
            styles += "height:100%;";
            continue;
          }
          if (item === "top") {
            styles += item + ':' + data[item] + 'px;'
            continue;
          }
          if (item === "left") {
            styles += item + ':' + data[item] + 'px;'
            continue;
          }
          if (item === "borderStyle" || item === "borderColor") {
            styles += item + ':' + data[item] + ';'
            continue;
          }
          if (item === "borderRadius" || item === "borderWidth") {
            styles += item + ':' + data[item] + 'px;'
            continue;
          }
          styles += item + ':' + data[item] + ';'
        }
        // console.log(styles);
        return styles;

      },
      setAStyle(item) {
        var styles = "";

        var cssObj = item.css;


        if (item.type == 8) {

          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "textAlign") {
              // delete value;
              continue;
            }
            if (item === "width") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            styles += item + ':' + value + ';'
          }
        } else {
          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "width") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            styles += item + ':' + value + ';'
          }
        }

        return styles;

      },
      setStyle1(item1) {
        var styles = "";

        var cssObj = item1.css;


        if (item1.type === 8) {

          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "textAlign") {
              // delete value;
              continue;
            }
            if (item === "width") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + ";";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            styles += item + ':' + value + ';'
            styles += "transform-origin:0 0;transform:scale(0.4);"
          }
        }
        if (item1.type == 3) {

          // debugger


        } else {
          for (var item in cssObj) {

            var value = cssObj[item];

            if (item === "width") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "height") {
              styles += item + ":" + value + "px;";
              continue;
            }
            if (item === "top") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            if (item === "left") {
              styles += item + ":" + value * 0.4 + "px;";
              continue;
            }
            styles += item + ':' + value + ';'

            if (item1.type != 3) {

              styles += "transform-origin:0 0;transform:scale(0.4);"
            }


          }
        }

        return styles;

      },
      setImageStyle(datas) {

        // debugger
        var styles = "";
        for (var item in datas) {
          if (item === "top") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "left") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "width") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "height") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          if (item === "borderWidth") {
            styles += item + ':' + datas[item] + 'px;'
            continue;
          }
          styles += item + ':' + datas[item] + ';'

        }

        // debugger
        // console.log('styles' +styles)
        return styles;

      },
//      loadBaiDuMap(data,id) {
//        $(document).ready(function () {
//          if($("#"+id).data('flag')==0) {
//            $("#" + id).data('flag', 1);
//            this.map = new BMap.Map(id); // 创建地图实例
//            var point = new BMap.Point(data.lng, data.lat); // 创建点坐标
//            this.map.centerAndZoom(point, 18); // 初始化地图,设置城市和地图级别。
//            var marker = new BMap.Marker(new BMap.Point(data.lng, data.lat));
//            this.map.addOverlay(marker);
//          }
//        });
//
//      },
      loadSvg(a, index) {
        // debugger
        //http://www.w3.org/2000/svg
        // return
        // console.log(index)
        var self = this;

        $(document).ready(function () {

          var eqxiuSvg = {
            NAMESPACE: "http://www.w3.org/2000/svg",
          }
          var b, c;
          if ($('.svg1_' + index).attr('data-flag') == 1) {

            return

          } else {
            $('.svg1_' + index).attr('data-flag', 1);

            if (a.src) {
              var _self = this;
              var id = $('.svg1_' + index);

              b = document.createElementNS(eqxiuSvg.NAMESPACE, "svg");
              b.setAttribute("class", "element svg-element");
              // _self.svgCount ++

              $.ajax({
                type: 'GET',
                url: a.src,
                dataType: "xml",
                async: false,
                success: function (c) {
                  var d = c.getElementsByTagName("svg"),
                    e = parseFloat($(d).attr("width") == undefined ? '100%' : $(d).attr("width")),
                    f = parseFloat($(d).attr("height") == undefined ? '100%' : $(d).attr("width")),
                    g = $(d).find("[fill], [style*='fill']"),
                    h = a.in.properties ? a.in.properties : {};
                  if (a.in.properties.colors) {
                    if ($(d).find("path").length > 1 || $(d).find("rect").length > 1) {

                      for (var i = 0; i < $(d).find("path").length; i++) {
                          var flags="color"+i;
                        $($(d).children(i)[i]).attr('fill', h.colors[flags]);
                      }
                    } else {
                      if (h.colors['color0']) {
                        $(d).find("[fill], [style*='fill']").attr("fill", h.colors['color0']);
                      } else {
                        $(d).find("[fill], [style*='fill']").attr("fill", h.colors['color1']);
                      }
                    }
                  }
                  a.in.properties = h;
                  var viewBoxVal = "0 0 " + e + " " + f;
                  b = d[0];
                  b.setAttribute("viewBox", viewBoxVal);
                  b.setAttribute("preserveAspectRatio", "none");
                  b.setAttribute("width", "100%");
                  b.setAttribute("height", "100%");
                  b.setAttribute("style", "position:absolute");
                  b.id = 'svg1_' + index;
                  b.setAttribute("class", "element svg-element");
                  $(id).empty().append(b);
                }
              });
            }
          }
        });
      },

      checkItem(itemType,index){
        this.checkitem=index;
        this.$store.dispatch('selectItem', index)

          var params = {};
          params.isChangePic = false;
          switch (itemType) {
            //文字
            case 25:
              params.index = 1;
              this.$store.dispatch('changeRightTab', params)
              break;
            //图片
            case 4:
              params.index = 20;
              // debugger
              this.$store.dispatch('changeRightTab', params)
              break;
            case 'phoneCallButton':
              //电话
              params.index = 73;
              this.$store.dispatch('changeRightTab', params)
              break;
            case 'linkButton':
              //网址
              params.index = 73;
              this.$store.dispatch('changeRightTab', params)
              break;
            case 'countDown':
              //倒计时
              // debugger
              params.index = 73;
              this.$store.dispatch('changeRightTab', params)

              break;
            case 'interActionButton':
              //倒计时
              // debugger
              params.index = 73;
              this.$store.dispatch('changeRightTab', params)

              break;
            case 'i':
              params.index = 61;
              this.$store.dispatch('changeRightTab', params)
              break;
            case 's':
              params.index = 61;
              this.$store.dispatch('changeRightTab', params)
              break;
            case 'h':
              params.index = 20;
              this.$store.dispatch('changeRightTab', params)
              break;
            // this.$store.dispatch('changeRightTab',20)
        }
      },

    }
  }
</script>
<style type="text/css">
  #pagelistID {
    cursor: pointer;
  }

  .grid_bg {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    content: " ";
    /*background-image: url('../assets/images/grid_bg.png');*/
    background-size: 320px 486px;
  }

  .content {
    width: 100%;
    height: 100%
  }

  .content > * {
    width: 100%;
    height: 100%
  }

  .pagetabs {
    position: fixed;
    top: 50px;
    height: 45px;
    width: 420px;
    line-height: 45px;
  }

  .pagetabs li {
    float: left;
    width: 50%;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    color: #272c33;
  }

  .pagetabs li.active {
    color: #1abd9b;
    background: #272c33;
    color: #ebebeb;
  }

  .leftbar, .layer {
    position: fixed;
    top: 95px;
    left: 0;
    bottom: 0;
    width: 220px;
    background: #272c33;
    overflow-y: auto;
  }

  .leftbar .thumb {
    width: 190px;
    height: 280px;
    margin: 10px auto;
    position: relative;
  }

  .leftbar .thumb.active, .leftbar .thumb:hover {
    background: #393d46;
  }

  .leftbar .thumb p {
    font-size: 14px;
    color: #b2b7bf;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }

  .leftbar .thumb.active p {
    color: #1abd9b;
  }

  .leftbar .thumb .wrap {
    width: 141px;
    height: 222px;
    margin: 0 auto;
    overflow: hidden;
    background: #b9b9b9;
  }

  .leftbar .thumb img {
    width: 100%;
    height: 100%;
  }

  .leftbar .thumb.active .oprate {
    position: absolute;
    bottom: 0;
    height: 35px;
    width: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 9999
  }

  .leftbar .thumb.active .oprate .copy {
    float: left;
    width: 35px;
    height: 35px;
    background: url(../assets/images/licon1.png) no-repeat center;
  }

  .leftbar .thumb.active .oprate .delete {
    float: right;
    width: 35px;
    height: 35px;
    background: url(../assets/images/licon2.png) no-repeat center;
  }

  .leftbar .addbtn a {
    position: fixed;
    width: 210px;
    height: 60px;
    bottom: 0;
    left: 0;
    background: url(../assets/images/addbtn.png) no-repeat center #272c33;
    z-index: 9998
  }

  .layer ul {
    margin-top: 10px;
  }

  .layer li {
    width: 200px;
    margin: 5px auto;
    height: 30px;
    line-height: 30px;
    border: 1px solid #1abd9b;
    border-radius: 5px;
    color: #1abd9b
  }

  .layer li.active {
    background: #1abd9b;
    color: #272c33
  }
</style>
